<template>
  <div class="coffee_machine">
    <c-title :hide="false" text="设备管理"></c-title>
    <template v-if="machineType == 'gradevin_machine'">
      <!-- ktv设备管理列表 -->
      <div class="title">当前管理设备：</div>
      <div class="list" v-for="(item, index) in info" :key="index" @click="tocoffee_machineIndex(item.id)">
        <div class="line">
          <div class="left">{{ item.name || "咖啡机" }}</div>
          <div class="right">ID：{{ item.id }}</div>
        </div>
        <div class="line">
          <div class="left tcolor">设备号:{{ item.device_no }}</div>
        </div>
        <div class="line">
          <div class="left tcolor">
            设备地址:{{ item.address }}
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="title">当前管理设备：</div>
      <div class="list" v-for="(item, index) in info" :key="index" @click="tocoffee_machineIndex(item.id)">
        <div class="line">
          <div class="left">{{ item.name || "咖啡机" }}</div>
          <div class="right">ID：{{ item.id }}</div>
        </div>
        <div class="line">
          <div class="left tcolor">设备号:{{ item.code }}</div>
        </div>
        <div class="line">
          <div class="left tcolor">
            设备地址:{{ item.has_one_province.areaname }}{{ item.has_one_city.areaname }}{{ item.has_one_district.areaname }}{{ item.has_one_street.areaname }}{{ item.address }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      info: [],
      machineType: "",
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.machineType = this.$route.name;
    this.getData();
  },
  methods: {
    tocoffee_machineIndex(id) {
      if (this.machineType == "energy_machine") {
        this.$router.push(this.fun.getUrl("energy_machineIndex", { machine_id: id }));
      } else if(this.machineType == "gradevin_machine"){
        this.$router.push(this.fun.getUrl("gradevin_machineIndex", { machine_id: id }));
      } else {
        this.$router.push(this.fun.getUrl("coffee_machineIndex", { machine_id: id }));
      }
    },
    getData() {
      let urlstr = this.machineType == "energy_machine" ? "plugin.energy-machine.frontend.owner.machineList" : "plugin.coffee-machine.frontend.owner.machineList";
      if (this.machineType == "gradevin_machine") {
        urlstr = "plugin.gradevin.frontend.owner.device.index";
      }
      $http.post(urlstr, {}, "loading").then(response => {
        if (response.result == 1) {
          this.isLoadMore = true;
          this.info = response.data.data;
          this.total_page = response.data.last_page;
          if (!this.total_page) {
            this.total_page = 0;
          }
        } else {
          this.$toast(response.msg);
        }
      });
    },
    getMoreData() {
      let urlstr = this.machineType == "energy_machine" ? "plugin.energy-machine.frontend.owner.machineList" : "plugin.coffee-machine.frontend.owner.machineList";
      if (this.machineType == "gradevin_machine") {
        urlstr = "plugin.gradevin.frontend.owner.device.index";
      }
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .get(
            urlstr,
            {
              page: this.page
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.info = this.info.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function(response) {
              // error callback
            }
          );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.coffee_machine {
  padding: 0.75rem;
  .title {
    font-weight: bold;
    line-height: 1.31rem;
    font-size: 0.94rem;
    text-align: left;
    margin-bottom: 0.5rem;
  }
  .list {
    padding: 0.75rem;
    background: #fff;
    border-radius: 0.75rem;
    margin-bottom: 0.62rem;
    .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 0.88rem;
        line-height: 1.5rem;
      }
      .tcolor {
        color: #999999;
        font-size: 0.75rem;
      }
      .right {
        font-size: 0.75rem;
        color: #28b2fa;
      }
    }
  }
}
</style>
